<!--

  module - 系统配置--- 配置项修改

  @author liuhx 2020-04-28

-->
<template>
  <div class="mixin-components-container">
    <el-col :span="24">
      <el-card>

        <div slot="header" class="clearfix">
          <template>
            <el-page-header content="编辑配置项" @back="goBack" />
          </template>
        </div>
        <div>
          <div>
            <div style="margin-bottom:50px;">
              <el-form ref="form" :model="form" label-width="140px" style="padding: 25px 0;">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item prop="configKey" label="配置项键名">
                      <el-input v-model="form.configKey" placeholder="请填写配置项键名" :disabled="true" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item
                      prop="value"
                      label="键值"
                      :rules="[
                        { required: true, message: '键值不能为空！'}
                      ]"
                    >
                      <el-input v-model="form.value" placeholder="请填写键值" />
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row :gutter="20">
                  <el-col>
                    <el-form-item label="说明">
                      <el-input
                        v-model="form.comment"
                        label="说明"
                        type="textarea"
                        :rows="3"
                        placeholder="请输入内容"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

              </el-form>
              <el-row style="padding-left:140px;">
                <el-link type="primary" size="mini" @click="submitForm('form')">
                  保存
                </el-link>
                <!-- <el-button waves type="primary">保存</el-button> -->
              </el-row>
            </div>

          </div>
        </div>

      </el-card>
    </el-col>
  </div>
</template>

<script>

// api
import { updateSysConfigByKey } from '@/api/sys/sysConfig'

// 水波纹插件
import waves from '@/directive/waves'

export default {
  name: 'UpdateSysConfiguration',
  directives: { waves },
  data() {
    return {
      form: {
        configKey: '',
        value: '',
        comment: ''
      }
    }
  },
  created() {
    this.form = this.$route.query
    console.log(this.$route.query)
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    submitForm(formName) {
      const curVue = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateSysConfigByKey(curVue.form).then(res => {
            if (res.code === 1) {
              this.noticeUtil.successMsg('修改成功!')
              this.$router.go(-1)
            } else {
              this.noticeUtil.errorMsg('修改失败!')
            }
          })
        } else {
          return false
        }
      })
    }
  }
}

</script>

